<template>
    <div class="search-containter">
        <form action="/">
  <van-search
    v-model="searchValue"
    show-action
    placeholder="请输入搜索关键词"
    @search="onSearch"
    @cancel="onCancel"
    @focus="isRusultShow = false"
  />
</form>
<!--搜索结果-->
<searchResult v-if="isRusultShow"></searchResult>
<!--联想建议-->
<searchSuggestion v-else-if="searchValue"></searchSuggestion>
<!--搜索历史-->
<searchHistory v-else></searchHistory>


    </div>
    </template>

<script setup>
import { useUsersStore3 } from "../../store/search"
import { storeToRefs } from "pinia"
import router from "../../router/router"
//引入搜索组件
import searchHistory from "../../components/search/search-history.vue"
import searchSuggestion from "../../components/search/search-suggestion.vue"
import searchResult from "../../components/search/search-result.vue"


let store = useUsersStore3()
let { searchValue, isRusultShow } = storeToRefs(store)


//点击enter进行搜索
function onSearch(val) {
    const index = store.historys.indexOf(val)
    if (index !== -1) {
        store.historys.splice(index, 1)
    }
    store.historys.unshift(val)
    // console.log(store.historys)
    store.onSearch1(val)

}
//点击取消
function onCancel() {
    router.replace("/")
}
</script> 

<style scoped>

</style>